<template>
  <view class="mine-top flex-column justify-between">
    <view class="flex-row align-center justify-between padding-lr-30 width-full" @click="jump('/user/my-info/my-info')">
      <view class="flex-row align-center">
        <l-avatar :avatar="userInfo ? userInfo.avatar : ''" :border="'4rpx solid ' + color" />
        <view class="flex-column margin-left-30">
          <text class="text-32 color-white text-bold">{{ userId ? userInfo.nickname || companyInfo.idCardName : '登录/注册' }}</text>
          <text class="text-24 color-t3 margin-top-10">{{ userInfo ? userInfo.companyName : '' }}</text>
        </view>
      </view>
      <image class="more" src="https://tbb-file.oss-cn-shenzhen.aliyuncs.com/tbb_admin_app/icon/mine_more.svg" />
    </view>

    <mine-vip v-if="isBuy" ref="vipInfo" :is-main-account="isMainAccount" />
  </view>
</template>

<script>
import MineVip from '../mine-vip/mine-vip'
import colors from '@/common/colors'
import { getUserInfo, canBuy, getAutoCompanyCert } from '@/common/api/user'
import { mapGetters, mapMutations } from 'vuex'
export default {
  name: 'MineInfo',
  components: {
    MineVip
  },
  data() {
    return {
      isBuy: true,
      color: colors.colorPrimary
    }
  },
  computed: {
    isMainAccount() {
      if (this.userInfo && this.userInfo.certType) return (this.userInfo.certType.indexOf('20') != -1 || this.userInfo.certType.indexOf('21') != -1) && this.userInfo.certTypeLabel === 'autoCompany'
      else return false
    },
    ...mapGetters({
      userId: 'userId',
      userInfo: 'userInfo',
      companyInfo: 'companyInfo'
    })
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.getUserInfo()
      this.getCompanyInfo()
      this.canBuy()
      if (this.$refs.vipInfo && this.$refs.vipInfo.init) this.$refs.vipInfo.init()
    },
    // 获取用户信息
    async getUserInfo() {
      const [err, res] = await getUserInfo()
      if (!this.$http.errorCheck(err, res)) return false
      const data = res.data.data
      this.setUserInfo(data.sysUser)
      this.setAuth(data.permissions)
      return true
    },
    // 获取公司信息
    async getCompanyInfo() {
      const [err, res] = await getAutoCompanyCert(this.userId, { userId: this.userId })
      if (!this.$http.errorCheck(err, res)) return false
      const companyInfo = res.data.data
      this.setCompanyInfo(companyInfo)
      return true
    },
    // 检测是否显示会员模块
    async canBuy() {
      const [err, res] = await canBuy()
      if (!this.$http.errorCheck(err, res)) return false
      this.isBuy = res.data.data
    },
    ...mapMutations({
      setUserInfo: 'user/setUserInfo',
      setCompanyInfo: 'user/setCompanyInfo',
      setAuth: 'user/setAuth'
    })
  }
}
</script>

<style scoped lang="scss">
.mine-top{
  padding-top:192rpx;
  height:508rpx;
}
.more{
  width:36rpx;
  height:36rpx;
}
</style>
